<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cursor 高级功能指南</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
        }
        
        .hero-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        
        .feature-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            transition: all 0.3s ease;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        }
        
        .code-block {
            background: #1e1e1e;
            color: #d4d4d4;
            border-radius: 8px;
            overflow-x: auto;
            position: relative;
        }
        
        .code-block::before {
            content: attr(data-lang);
            position: absolute;
            top: 8px;
            right: 12px;
            font-size: 12px;
            color: #858585;
            text-transform: uppercase;
        }
        
        .section-divider {
            height: 2px;
            background: linear-gradient(to right, transparent, #667eea, transparent);
            margin: 4rem 0;
        }
        
        .floating-icon {
            animation: float 3s ease-in-out infinite;
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }
        
        .gradient-text {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .mermaid {
            display: flex;
            justify-content: center;
            margin: 2rem 0;
        }
        
        .drop-cap {
            float: left;
            font-size: 4rem;
            line-height: 3rem;
            padding-right: 0.5rem;
            margin-top: -0.5rem;
            font-weight: 700;
            color: #667eea;
        }
    </style>
</head>
<body>
    <!-- Hero Section -->
    <div class="hero-gradient text-white py-20 px-8">
        <div class="max-w-6xl mx-auto">
            <div class="text-center">
                <i class="fas fa-rocket text-6xl mb-6 floating-icon"></i>
                <h1 class="text-5xl font-bold mb-4">Cursor 高级功能完全指南</h1>
                <p class="text-xl opacity-90 max-w-3xl mx-auto">
                    探索 Cursor 的强大功能，从调试工具到团队协作，从扩展定制到多语言支持，全面提升您的开发效率
                </p>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="max-w-6xl mx-auto px-8 py-12">
        <!-- Introduction -->
        <div class="bg-white rounded-2xl shadow-xl p-8 mb-12">
            <p class="text-lg leading-relaxed text-gray-700">
                <span class="drop-cap">除</span>了基础的编辑和 AI 功能外，Cursor 还提供了一系列高级特性，帮助开发者进一步提升工作效率和代码质量。本指南将深入探讨这些高级功能，助您充分发挥 Cursor 的潜力。
            </p>
        </div>

        <!-- 调试与分析工具 -->
        <section class="mb-16">
            <h2 class="text-4xl font-bold mb-8 gradient-text">
                <i class="fas fa-bug mr-3"></i>7.1 调试与分析工具
            </h2>
            
            <p class="text-lg text-gray-700 mb-8">
                Cursor 继承了 VSCode 强大的调试能力，并增加了 AI 辅助功能，使调试过程更加高效。
            </p>

            <div class="grid md:grid-cols-2 gap-8 mb-12">
                <div class="feature-card rounded-xl p-6">
                    <h3 class="text-2xl font-semibold mb-4 text-purple-700">
                        <i class="fas fa-cog mr-2"></i>调试器配置与使用
                    </h3>
                    
                    <div class="space-y-4">
                        <div class="bg-purple-50 rounded-lg p-4">
                            <h4 class="font-semibold text-purple-800 mb-2">调试配置</h4>
                            <ul class="space-y-2 text-gray-700">
                                <li><i class="fas fa-check-circle text-purple-600 mr-2"></i>在 .vscode 文件夹中创建 launch.json 配置调试设置</li>
                                <li><i class="fas fa-check-circle text-purple-600 mr-2"></i>使用调试视图中的齿轮图标自动生成配置</li>
                                <li><i class="fas fa-check-circle text-purple-600 mr-2"></i>支持多种调试器：Node.js、Python、Chrome、Firefox 等</li>
                                <li><i class="fas fa-check-circle text-purple-600 mr-2"></i>配置断点条件、日志点和异常捕获</li>
                            </ul>
                        </div>
                        
                        <div class="bg-blue-50 rounded-lg p-4">
                            <h4 class="font-semibold text-blue-800 mb-2">基本调试操作</h4>
                            <ul class="space-y-2 text-gray-700">
                                <li><i class="fas fa-play text-blue-600 mr-2"></i>使用 F5 启动调试会话</li>
                                <li><i class="fas fa-circle text-red-600 mr-2"></i>使用 F9 设置/取消断点</li>
                                <li><i class="fas fa-step-forward text-blue-600 mr-2"></i>使用 F10 逐过程、F11 逐语句执行代码</li>
                                <li><i class="fas fa-stop text-red-600 mr-2"></i>使用 Shift+F5 停止调试会话</li>
                                <li><i class="fas fa-redo text-green-600 mr-2"></i>使用 Ctrl+Shift+F5 重启调试会话</li>
                            </ul>
                        </div>
                    </div>
                </div>
                
                <div class="feature-card rounded-xl p-6">
                    <h3 class="text-2xl font-semibold mb-4 text-purple-700">
                        <i class="fas fa-brain mr-2"></i>AI辅助调试流程
                    </h3>
                    
                    <div class="space-y-4">
                        <div class="bg-gradient-to-r from-purple-50 to-pink-50 rounded-lg p-4">
                            <h4 class="font-semibold text-purple-800 mb-2">错误理解</h4>
                            <p class="text-gray-700">在调试控制台中复制错误信息，使用 AI 对话解释错误原因和可能的解决方案</p>
                        </div>
                        
                        <div class="bg-gradient-to-r from-blue-50 to-cyan-50 rounded-lg p-4">
                            <h4 class="font-semibold text-blue-800 mb-2">条件表达式生成</h4>
                            <p class="text-gray-700">使用 AI 描述复杂的断点条件，AI 可以生成准确的条件表达式</p>
                        </div>
                        
                        <div class="bg-gradient-to-r from-green-50 to-teal-50 rounded-lg p-4">
                            <h4 class="font-semibold text-green-800 mb-2">调试路径分析</h4>
                            <p class="text-gray-700">分享调用堆栈截图或文本，AI 分析执行流程，指出潜在问题</p>
                        </div>
                        
                        <div class="bg-gradient-to-r from-yellow-50 to-orange-50 rounded-lg p-4">
                            <h4 class="font-semibold text-yellow-800 mb-2">变量状态诊断</h4>
                            <p class="text-gray-700">复制关键变量的值到 AI 对话，AI 可以发现数据结构问题或状态不一致</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 代码示例 -->
            <div class="bg-gray-50 rounded-xl p-6 mb-8">
                <h4 class="text-xl font-semibold mb-4 text-gray-800">
                    <i class="fas fa-code mr-2"></i>示例 launch.json 配置（Java Spring Boot 项目）
                </h4>
                <div class="code-block p-4" data-lang="json">
                    <pre>{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "java",
      "name": "启动应用",
      "request": "launch",
      "mainClass": "com.example.demo.Application",
      "projectName": "demo",
      "args": "",
      "env": {
        "SPRING_PROFILES_ACTIVE": "development"
      }
    },
    {
      "type": "java",
      "name": "运行测试",
      "request": "launch",
      "mainClass": "org.junit.platform.console.ConsoleLauncher",
      "args": [
        "--select-package=com.example.demo",
        "--details=tree"
      ]
    }
  ],
  "compounds": [
    {
      "name": "应用+远程调试",
      "configurations": ["启动应用", "附加调试器"]
    }
  ]
}</pre>
                </div>
            </div>
        </section>

        <div class="section-divider"></div>

        <!-- 团队协作能力 -->
        <section class="mb-16">
            <h2 class="text-4xl font-bold mb-8 gradient-text">
                <i class="fas fa-users mr-3"></i>7.2 团队协作能力
            </h2>
            
            <p class="text-lg text-gray-700 mb-8">
                Cursor 提供了多种功能，帮助团队成员高效协作和共享知识。
            </p>

            <div class="feature-card rounded-xl p-8 mb-8">
                <h3 class="text-2xl font-semibold mb-6 text-purple-700">
                    <i class="fas fa-globe mr-2"></i>远程协作模式
                </h3>
                
                <div class="grid md:grid-cols-2 gap-6">
                    <div class="bg-gradient-to-br from-purple-100 to-pink-100 rounded-lg p-6">
                        <h4 class="font-semibold text-purple-800 mb-3">
                            <i class="fas fa-code-branch mr-2"></i>远程存储库协作
                        </h4>
                        <ul class="space-y-2 text-gray-700">
                            <li>• 与 GitHub、GitLab、Bitbucket 等平台深度集成</li>
                            <li>• 直接从 Cursor 中创建、查看和回复 PR 评论</li>
                            <li>• 查看变更历史和责任人</li>
                        </ul>
                    </div>
                    
                    <div class="bg-gradient-to-br from-blue-100 to-cyan-100 rounded-lg p-6">
                        <h4 class="font-semibold text-blue-800 mb-3">
                            <i class="fas fa-server mr-2"></i>远程开发
                        </h4>
                        <ul class="space-y-2 text-gray-700">
                            <li>• 通过 SSH 扩展连接到远程开发环境</li>
                            <li>• 在本地编辑远程服务器上的文件</li>
                            <li>• 无缝使用远程环境的调试器和终端</li>
                            <li>• AI 功能在远程开发模式下同样可用</li>
                        </ul>
                    </div>
                    
                    <div class="bg-gradient-to-br from-green-100 to-teal-100 rounded-lg p-6">
                        <h4 class="font-semibold text-green-800 mb-3">
                            <i class="fas fa-tasks mr-2"></i>异步协作工具
                        </h4>
                        <ul class="space-y-2 text-gray-700">
                            <li>• 使用内置的任务和问题跟踪功能</li>
                            <li>• 创建带有代码上下文的任务</li>
                            <li>• AI 可以总结长期项目状态和关键决策</li>
                        </ul>
                    